<template>
  <div class="comp-manage column">
    <div class="title row">
      <h3>竞赛管理</h3>
    </div>
    <div>
      <el-button type="primary" @click="compAdd(item)">添加</el-button>
    </div>
    <div class="container row">
      <el-card v-for="(item, index) in compList" :key="index" class="box-card">
        <div slot="header" class="clearfix row between">
          <div>
            <span class="font18 bold header">{{ item.compName }}</span>
          </div>
          <div class="row">
            <el-button
              @click="compDelete(item.compId)"
              style="float: right; padding: 3px 0; color: red"
              type="text"
              >删除</el-button
            >
            <el-button
              @click="compEdit(item)"
              style="float: right; padding: 3px 0"
              type="text"
              >编辑</el-button
            >
          </div>
        </div>
        <div class="font14 item">竞赛类型：{{ item.category }}</div>
        <div class="font14 item">
          比赛时间：{{ item.dateTime | filterTime1 }} -
          {{ item.dateTime | filterTime2 }}
        </div>
        <div class="font14 item">
          负责人：{{ item.schoolName }} - {{ item.sponsor
          }}<span style="color: green; cursor: pointer">老师</span>
        </div>
        <div class="font14 item">报名人数：{{ item.participants }}人</div>
      </el-card>
    </div>
    <div class="row center">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="10"
        layout="total, prev, pager, next"
        :total="this.compList.length"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import CompApi from "@/api/competition";
export default {
  name: "compManage",
  data() {
    return {
      currentPage: 1,
      total: 20,
      compList: [
        // {
        //   compId: "sadascsaasda",
        //   compName: "电子商务竞赛",
        //   schoolName: "杭州电子科技大学",
        //   sponsor: "李叉叉",
        //   dateTime: ["2021-11-03", "2021-11-13"],
        //   participants: 130,
        //   category: "计算机类",
        //   subtitle: "电子商务竞赛",
        // },
      ],
    };
  },
  filters: {
    filterTime1(list) {
      return list.split(",")[0];
    },
    filterTime2(list) {
      return list.split(",")[1];
    },
  },
  computed: {
    userInfo() {
      return JSON.parse(localStorage.getItem("userInfo"));
    },
  },
  mounted() {
    this.getList();
  },
  methods: {
    // 获取所有竞赛数据
    getList() {
      var formData = new FormData();
      formData.append("schoolName", this.userInfo.schoolName);
      CompApi.getListAll(formData).then((res) => {
        var data = res.data.data;
        console.log("获取到竞赛项目数据：", data);
        this.compList = data;
      });
    },
    // 分页点击
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      // this.currentPage = val;
      // this.filterData(this.tableData);
    },
    // 卡片编辑 删除
    compDelete(id) {
      this.$confirm("此操作将删除一条记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          var formData = new FormData();
          formData.append("compId", id);
          CompApi.deleteComp(formData).then((res) => {
            this.$message({
              type: "success",
              message: "操作成功!",
            });
            this.getList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },
    compAdd() {
      localStorage.removeItem("currentCompData");
      this.$router.push({ path: "/userCenter/edit" });
    },
    compEdit(data) {
      this.$confirm("此操作将编辑一条记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info",
      })
        .then(() => {
          console.log(data);
          localStorage.setItem("currentCompData", JSON.stringify(data));
          this.$router.push({ path: "/userCenter/edit" });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },
  },
};
</script>

<style scoped>
.comp-manage {
  width: 1000px;
  box-sizing: border-box;
  padding: 35px 0 0 0;
}
.comp-manage .title {
  align-items: center;
}
.comp-manage .title h3 {
  color: #343739;
  font-size: 24px;
  display: inline-block;
  margin: 0 15px 15px 0;
  font-weight: normal;
  vertical-align: middle;
}
.container {
  margin: 25px 0;
  flex-wrap: wrap;
}
/* 卡片 */
.item {
  margin-bottom: 18px;
}
.clearfix .header {
  width: 100px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 300px;
  margin: 0 20px 20px 0;
}
</style>